<!DOCTYPE html><!-- html5文件的标准头 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="background-color: #f0f0f0;">

    <p style="background-color: #e0ffe0;">
        这是<i style="background-color: #ffffe0;">一个</i><strong style="background-color: #ffe0e0;">段落</strong>
        <span style="color: red; width: 80px ;height: 50px; background-color: #e0e0ff;">红色</span>
        <a href="https://www.baidu.com" style="background-color: #e0ffff;">百度页面</a>
    </p>
    <div class="box">
        这是一个红色盒子
    </div>
    <p style="background-color: #e0ffe0;">--------------这是一条分界线-------------</p>
    <div class="box1">
        这是一个蓝色盒子
    </div>

    <header style="background-color: #ffe0e0;">
        这是头部标签
    </header>
    <nav style="background-color: #e0e0ff;">这是nav标签</nav>
    <main style="background-color: #ffffe0;">
        这是main标签
        <article style="background-color: #e0ffff;">这是articale标签
            <h1 style="background-color: #ffe0e0;">这是h1标签</h1>
            <section style="background-color: #e0e0ff;">这是section标签</section>
        </article>
        <aside style="background-color: #e0ffe0;">这是aside标签</aside>
    </main>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgb(255, 144, 65);
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: rgb(93, 217, 255);
        }
    </style>
</body>

</html>